<template>
    <div class="inner-warp">
        <MainTitleVue title="管理中心" />
        <n-empty size="huge" description="暂无消息" v-if="data.length === 0"></n-empty>
        <div class="sub-warp">
            <ManageItem
                v-for="(item, index) in data.slice(0, max_length)"
                :key="index"
                :info="item"
                :index="index"
                @checkNotify="checkNotify"
            />
        </div>
        <n-divider title-placement="center" v-if="max_length < data.length">
            <n-button round color="#333333" size="small" @click="getMore">查看更多</n-button>
        </n-divider>
    </div>
</template>

<script setup lang='ts'>
import MainTitleVue from "@/components/common/MainTitle.vue";
import ManageItem from "@/views/user/components/ManageItem.vue";
import { useMessage } from "naive-ui";
import { getCurrentInstance, onMounted, ref } from "vue";

// api访问代理
const { proxy } = getCurrentInstance() as any

// 引入消息函数
const message = useMessage()

// 消息列表
let data = ref([])

// 最多显示消息数
let max_length = ref(10)

onMounted(() => {
    getNotify()
})

const getNotify = (() => {
    proxy.$api.manage.manageList().then((result: any) => {
        if (result.success) {
            data.value = result.data
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

const checkNotify = ((params: any) => {
    proxy.$api.manage.manageCheck(params).then((result: any) => {
        if (result.success) {
            (data.value as any)[params.index].is_managed = params.pass ? 1 : 2
            message.success("已处理")
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

// 查看更多
const getMore = (() => {
    max_length.value += 10
})

</script>

<style scoped>
.inner-warp {
    margin: 50px auto;
    width: 1100px;
}

.sub-warp {
    column-gap: 10px;
    column-count: 2;
}
</style>